<template>
  <div class="container" >
    <nav-bar subTitle="态势感知">
      <template #navBar>
        <bar-box :tableData="tableData"></bar-box>
      </template>
    </nav-bar>
    <div class="body" >
      <template v-if="actionName === 'fourEnterprises'">
        <four-enterprises></four-enterprises>
      </template>
      <template v-else-if="actionName === 'enterpriseEnhancement'">
        <enterprise-enhancement></enterprise-enhancement>
      </template>

    </div>
  </div>
</template>

<script setup>
import {ref, watchEffect} from "vue";
import {useRoute} from 'vue-router'
import NavBar from "@/components/navBar.vue";
import BarBox from "@/components/barBox.vue";
import {navData} from './data/data.js'
import FourEnterprises from "@/views/enterpriseCultivation/components/fourEnterprises.vue";
import EnterpriseEnhancement from "@/views/enterpriseCultivation/components/enterpriseEnhancement.vue";

const tableData = ref(navData)
const route = useRoute()
const actionName = ref('fourEnterprises')

watchEffect(function () {
  actionName.value = route.query.type
})


</script>


<style scoped lang="scss">

.body {
  padding: 20px;
  box-sizing: border-box;
  background-color: #f4f5f8;
}

</style>
